<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div style="float:right;margin: 10px;">
                        <a id="btn-export" class="layui-btn">导出</a>
                        <a id="btn-preview" class="layui-btn">预览</a>
                    </div>
                    <form class="layui-form" action="#" lay-filter="report-form">
                        <input type="hidden" name="id">
                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">报表周期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="period" class="layui-input" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开始日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="startDate" class="layui-input" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">截止日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="endDate" class="layui-input" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">创建时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="createTime" class="layui-input" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <table class="layui-hide" id="electric-report-item-table"
                           lay-filter="electric-report-item-table"></table>
                    <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="photo">照片</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="electric-report-item-form">
    <div class="layui-card">
        <div class="layui-card-header">用电报表项详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="electric-report-item-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">*名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="meterName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*总户号</label>
                    <div class="layui-input-block">
                        <input type="text" name="meterNo" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*倍率</label>
                    <div class="layui-input-block">
                        <input type="number" name="ratio" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上周有功(kwh)</label>
                    <div class="layui-input-block">
                        <input type="number" name="lastAmount" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">本周有功(kwh)</label>
                    <div class="layui-input-block">
                        <input type="number" name="thisAmount" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">周用电量(kwh)</label>
                    <div class="layui-input-block">
                        <input type="number" name="weeklyAmount" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上周电费余数(元)</label>
                    <div class="layui-input-block">
                        <input type="number" name="lastBalance" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">本周电费余数(元)</label>
                    <div class="layui-input-block">
                        <input type="number" name="thisBalance" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">周用电数(元)</label>
                    <div class="layui-input-block">
                        <input type="number" name="weeklyCost" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预计日耗电数(元)</label>
                    <div class="layui-input-block">
                        <input type="number" name="dailyCost" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预计剩余用电天数</label>
                    <div class="layui-input-block">
                        <input type="number" name="leftDays" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否需要充值</label>
                    <div class="layui-input-block">
                        <input name="chargeText" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">抄表人</label>
                    <div class="layui-input-block">
                        <input type="text" name="reader" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">抄表时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="readTime" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input name="stateText" class="layui-input" readonly>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var id = getParam('id');
        var popupIndex;

        loadForm(id);

        function loadForm(id) {
            $.get('electric-reports/' + id, function (result) {
                form.val('report-form', result.data);
            });
        }

        table.render({
            elem: '#electric-report-item-table',
            url: 'electric-report-items',
            skin: 'line',
            limit: 10000,
            cols: [[
                {type: 'checkbox'},
                {
                    title: '序号', width: 60, templet: function (d) {
                        return d.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'meterName', title: '名称', width: 180},
                {field: 'meterNo', title: '总户号'},
                {field: 'ratio', title: '倍率', width: 100},
                {field: 'lastAmount', title: '上周有功(kwh)'},
                {field: 'thisAmount', title: '本周有功(kwh)'},
                {field: 'weeklyAmount', title: '周用电量(kwh)'},
                {field: 'lastBalance', title: '上周电费余数(元)'},
                {field: 'thisBalance', title: '本周电费余数(元)'},
                {field: 'weeklyCost', title: '周用电数(元)'},
                {field: 'stateText', title: '状态', width: 80},
                {fixed: 'right', title: '操作', toolbar: '#toolbar-operation', width: 150}
            ]],
            where: {
                reportId: id
            }
        });

        function showElectricReportItemForm() {
            popupIndex = admin.popupRight({
                area: '480px',
                success: function () {
                    var formHtml = $('#electric-report-item-form').html();
                    $('#' + this.id).html(formHtml);
                    form.render();
                    laydate.render({
                        elem: '#read-time'
                    });
                }
            });
            return popupIndex;
        }

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        $("#btn-export").on('click', function () {
            let url = 'electric-reports/export?id=' + id;
            window.open(url);
        });

        $("#btn-preview").on('click', function () {
            $.get("electric-reports/preview", {id}, function (result) {
                var fileId = result.data;
                window.open('office-viewer?fileId=' + fileId);
            });
        });

        table.on('tool(electric-report-item-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                showElectricReportItemForm();
                form.val('electric-report-item-form', data);
            } else if (obj.event === 'photo') {
                if (data.imgs) {
                    var images = data.imgs.split(',');
                    var photos = {data: []};
                    for (var i in images) {
                        photos.data.push({
                            src: '/img/' + images[i]
                        });
                    }
                    layer.photos({
                        photos: photos
                    });
                } else {
                    layer.msg('无现场照片');
                }
            }
        });

        form.on('submit(form-submit)', function (data) {
            $.ajax({
                url: 'electric-report-items',
                type: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('操作成功');
                        table.reload('electric-report-item-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });

    });
</script>
<div id="layer-images"></div>
</body>

</html>